<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="stripes"
	uri="http://stripes.sourceforge.net/stripes.tld"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<stripes:useActionBean beanclass="simple.web.UsersActionBean" var="bean" />
<html>
<head>
<meta charset="utf-8" />
<title>Autocomplete Users</title>
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<link rel="stylesheet" media="all" href="css/less_4_lh_1.4.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->

    <!-- JQuery, JQuery UI theme and style -->
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
    <script type="text/javascript" src="scripts/jquery/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquery/jquery-ui-1.8.14.custom.min.js"></script>

    <script type="text/javascript">
        $(function() {
            var availableUsers = [
            <c:forEach items="${ bean.users }" var="user" varStatus="loop">
                "${user.firstName} ${user.lastName}"<c:if test="${fn:length(bean.users) > loop.index + 1}">,</c:if>
            </c:forEach>
            ];
            $( "#users" ).autocomplete({
                source: availableUsers
            });
        });
    </script>
    <style type="text/css">
        .ui-autocomplete-loading { background: white url('images/ajax-loader.gif') right center no-repeat; }
        #users { width: 25em; }
    </style>
</head>

<body lang="en">
	<p>Autocomplete Users</p>
    <div class="ui-widget">
        <label for="users">Users: </label>
        <input id="users" />
    </div>

</body>

</html>